#{extends 'main.html' /}
#{set title:'Timetable' /}

<link href="@{'/public/css/main.css'}" rel="stylesheet" type="text/css" />
<link href="@{'/public/css/tables.css'}" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/ui-lightness/jquery-ui-1.7.2.custom.css'}" />
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/jquery.ui.timepicker.css'}" />

#{if flash.error}
    <p style="color:#c00">
        ${flash.error}
    </p>
#{/if}

#{script 'jquery-ui-1.7.2.custom.min.js' /}
#{set 'moreScripts'}
<script src="@{'/public/javascripts/jquery.ui.timepicker.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/jquery.ui.widget.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/jquery.ui.core.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/jquery.ui.position.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script src="@{'/public/javascripts/jquery.ui.tabs.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>


<script>
	$(function() {
		$('#timepicker1, #timepicker2, #timepicker3, #timepicker4, #timepicker5, #timepicker6, #timepicker7, #timepicker8, #timepicker9, #timepicker10, #timepicker11, #timepicker12').timepicker({
		    // Options
		    timeSeparator: ':',           // The character to use to separate hours and minutes. (default: ':')
		    showLeadingZero: true,        // Define whether or not to show a leading zero for hours < 10.
		                                    // (default: true)
		    showMinutesLeadingZero: true, // Define whether or not to show a leading zero for minutes < 10.
		                                   //  (default: true)
		    showPeriod: false,            // Define whether or not to show AM/PM with selected time. (default: false)
		    showPeriodLabels: true,       // Define if the AM/PM labels on the left are displayed. (default: true)
		    periodSeparator: ' ',         // The character to use to separate the time from the time period.
		    altField: '#alternate_input', // Define an alternate input to parse selected time to
		    defaultTime: '12:00',         // Used as default time when input field is empty or for inline timePicker
		                                  // (set to 'now' for the current time, '' for no highlighted time,
		                                   //  default value: now)

		    // trigger options
		    showOn: 'focus',              // Define when the timepicker is shown.
		                                  // 'focus': when the input gets focus, 'button' when the button trigger element is clicked,
		                                  // 'both': when the input gets focus and when the button is clicked.
		    button: null,                 // jQuery selector that acts as button trigger. ex: '#trigger_button'

		    // Localization
		    hourText: 'Hour',             // Define the locale text for "Hours"
		    minuteText: 'Minute',         // Define the locale text for "Minute"

		    // Position
		    myPosition: 'left top',       // Corner of the dialog to position, used with the jQuery UI Position utility if present.
		    atPosition: 'left bottom',    // Corner of the input to position

		 /*    // Events
		    beforeShow: beforeShowCallback, // Callback function executed before the timepicker is rendered and displayed.
		    onSelect: onSelectCallback,   // Define a callback function when an hour / minutes is selected.
		    onClose: onCloseCallback,     // Define a callback function when the timepicker is closed.
		    onHourShow: onHourShow,       // Define a callback to enable / disable certain hours. ex: function onHourShow(hour)
		    onMinuteShow: onMinuteShow,   // Define a callback to enable / disable certain minutes. ex: function onMinuteShow(hour, minute)
		 */
		    // custom hours and minutes
		    hours: {
		        starts: 0,                // First displayed hour
		        ends: 23                  // Last displayed hour
		    },
		    minutes: {
		        starts: 0,                // First displayed minute
		        ends: 55,                 // Last displayed minute
		        interval: 5               // Interval of displayed minutes
		    },
		    rows: 4,                      // Number of rows for the input tables, minimum 2, makes more sense if you use multiple of 2
		    showHours: true,              // Define if the hours section is displayed or not. Set to false to get a minute only dialog
		    showMinutes: true,            // Define if the minutes section is displayed or not. Set to false to get an hour only dialog

		    // buttons
		    showCloseButton: false,       // shows an OK button to confirm the edit
		    closeButtonText: 'Done',      // Text for the confirmation button (ok button)
		    showNowButton: false,         // Shows the 'now' button
		    nowButtonText: 'Now',         // Text for the now button
		    showDeselectButton: false,    // Shows the deselect time button
		    deselectButtonText: 'Deselect' // Text for the deselect button
		});
	});	
</script>
#{/set}

<div align="left" style="width: 95%">
	<h1>Timetable</h1>
	<p>Please select the days you're going to <b>${user.university}</b> and specify your arrival and leaving times. 
		Additionally you can add information about having a car available. (Don't forget to save your changes!)</p>
	<br>
	#{field 'acknowledgementMsg'}
    <p class="fError">
        <span class="error"><strong>${acknowledgementMsg}</strong></span>
    </p>
#{/field}
</div> 

#{if timetable}
	<form action="@{Profile.saveTimetable()}" method="GET">
		<table class="box-table-a" border="1" style="width: 95%;">
			<tr valign="middle">
			    <th align="center" width="14%"></th>
			    <th align="center" width="13%">Monday</th>
			    <th align="center" width="13%">Tuesday</th>
			    <th align="center" width="13%">Wednesday</th>
			    <th align="center" width="13%">Thursday</th>
			    <th align="center" width="13%">Friday</th>
			    <th align="center" width="13%">Saturday</th>
			</tr>
			<tr>
				<td>Drive?</td>
				<td align="center">
					#{field 'timetable.driveMonday'}
				            <input type="checkbox" name="${field.name}" ${timetable?.driveMonday ? 'checked':''}>
				    #{/field}
				</td>
				<td align="center">
					#{field 'timetable.driveTuesday'}
				            <input type="checkbox" name="${field.name}" ${timetable?.driveTuesday ? 'checked':''}>
				    #{/field}
				</td>
				<td align="center">
					#{field 'timetable.driveWednesday'}
				            <input type="checkbox" name="${field.name}" ${timetable?.driveWednesday ? 'checked':''}>
				    #{/field}
				</td>
				<td align="center">
					#{field 'timetable.driveThursday'}
				            <input type="checkbox" name="${field.name}" ${timetable?.driveThursday ? 'checked':''}>
				    #{/field}
				</td>
				<td align="center">
					#{field 'timetable.driveFriday'}
				            <input type="checkbox" name="${field.name}" ${timetable?.driveFriday ? 'checked':''}>
				    #{/field}
				</td>
				<td align="center">
					#{field 'timetable.driveSaturday'}
				            <input type="checkbox" name="${field.name}" ${timetable?.driveSaturday ? 'checked':''}>
				    #{/field}
				</td>
			</tr>
			<tr>
				<td>Car?</td>
				<td align="center">
					#{field 'timetable.carMonday'}
				            <input type="checkbox" name="${field.name}" ${timetable?.carMonday ? 'checked':''}>
				    #{/field}
				</td>
				<td align="center">
					#{field 'timetable.carTuesday'}
				            <input type="checkbox" name="${field.name}" ${timetable?.carTuesday ? 'checked':''}>
				    #{/field}
				</td>
				<td align="center">
					#{field 'timetable.carWednesday'}
				            <input type="checkbox" name="${field.name}" ${timetable?.carWednesday ? 'checked':''}>
				    #{/field}
				</td>
				<td align="center">
					#{field 'timetable.carThursday'}
				            <input type="checkbox" name="${field.name}" ${timetable?.carThursday ? 'checked':''}>
				    #{/field}
				</td>
				<td align="center">
					#{field 'timetable.carFriday'}
				            <input type="checkbox" name="${field.name}" ${timetable?.carFriday ? 'checked':''}>
				    #{/field}
				</td>
				<td align="center">
					#{field 'timetable.carSaturday'}
				            <input type="checkbox" name="${field.name}" ${timetable?.carSaturday ? 'checked':''}>
				    #{/field}
				</td>
			</tr>
			<tr>
				<td>Start Time:</td>
				<td align="center">
					#{field 'timetable.startTimeMonday'}
				            <input type="text" style="width: 40px; text-align:center;" name="${field.name}" value="${timetable?.startTimeMonday}" id="timepicker1">
				    #{/field}
				</td>
				<td align="center">
					#{field 'timetable.startTimeTuesday'}
				            <input type="text" style="width: 40px; text-align:center;" name="${field.name}" value="${timetable?.startTimeTuesday}" id="timepicker2">
				    #{/field}
				</td>
				<td align="center">
					#{field 'timetable.startTimeWednesday'}
				            <input type="text" style="width: 40px; text-align:center;" name="${field.name}" value="${timetable?.startTimeWednesday}" id="timepicker3">
				    #{/field}
				</td>
				<td align="center">
					#{field 'timetable.startTimeThursday'}
				            <input type="text" style="width: 40px; text-align:center;" name="${field.name}" value="${timetable?.startTimeThursday}" id="timepicker4">
				    #{/field}
				</td>
				<td align="center">
					#{field 'timetable.startTimeFriday'}
				            <input type="text" style="width: 40px; text-align:center;" name="${field.name}" value="${timetable?.startTimeFriday}" id="timepicker5">
				    #{/field}
				</td>
				<td align="center">
					#{field 'timetable.startTimeSaturday'}
				            <input type="text" style="width: 40px; text-align:center;" name="${field.name}" value="${timetable?.startTimeSaturday}" id="timepicker6">
				    #{/field}
				</td>
			</tr>
			<tr>
				<td>Leave Time:</td>
				<td align="center">
					#{field 'timetable.leaveTimeMonday'}
				            <input type="text" style="width: 40px; text-align:center;" name="${field.name}" value="${timetable?.leaveTimeMonday}" id="timepicker7">
				    #{/field}
				</td>
				<td align="center">
					#{field 'timetable.leaveTimeTuesday'}
				            <input type="text" style="width: 40px; text-align:center;" name="${field.name}" value="${timetable?.leaveTimeTuesday}" id="timepicker8">
				    #{/field}
				</td>
				<td align="center">
					#{field 'timetable.leaveTimeWednesday'}
				            <input type="text" style="width: 40px; text-align:center;" name="${field.name}" value="${timetable?.leaveTimeWednesday}" id="timepicker9">
				    #{/field}
				</td>
				<td align="center">
					#{field 'timetable.leaveTimeThursday'}
				            <input type="text" style="width: 40px; text-align:center;" name="${field.name}" value="${timetable?.leaveTimeThursday}" id="timepicker10">
				    #{/field}
				</td>
				<td align="center">
					#{field 'timetable.leaveTimeFriday'}
				            <input type="text" style="width: 40px; text-align:center;" name="${field.name}" value="${timetable?.leaveTimeFriday}" id="timepicker11">
				    #{/field}
				</td>
				<td align="center">
					#{field 'timetable.leaveTimeSaturday'}
				            <input type="text" style="width: 40px; text-align:center;" name="${field.name}" value="${timetable?.leaveTimeSaturday}" id="timepicker12">
				    #{/field}
				</td>
			</tr>
		</table>
		<br>
		<input type="submit" style="width:80px;" name="save" value="Save">
		<input type="submit" style="width:80px;" name="delete" value="Delete">
	</form>

#{/if}
#{if !timetable}
	<p>You don't have a timetable deposited yet. Do you want to deposit one now?</p>
	<form action="@{Profile.initiateTimetable()}" method="GET">
		<br>
		<input type="submit" style="width:80px;" name="yes" value="Yes">
	</form>
#{/if}